<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JModuleLink演示</title>
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
<style type="text/css">
.ms-controller {
	visibility: hidden;
}

tr th, tr td {
	text-align: center;
}

li {
	list-style: none;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
	.table>thead>tr>td, .table>thead>tr>th {
	vertical-align: middle;
}

pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}
</style>
</head>
<body>
	<div class="container ms-controller" style="padding-top: 20px"
		ms-controller="test">
		<div :visible="!!errMsg" class="alert alert-danger" role="alert">{{errMsg}}</div>
		<div>
			<a href="/load.html" class="btn btn-default"
				style="margin-left: 10px">加载模块</a>
			<button :click="list" class="btn btn-default"
				style="margin-left: 10px">刷新模块</button>
			<a
				href="http://gitee.com/jianggujin/JModuleLink" target="_source"
				class="btn btn-default" style="margin-left: 10px">源码</a>
		</div>
		<table class="table table-bordered table-striped table-hover"
			style="margin-top: 20px">
			<thead>
				<tr>
					<th>模块名称</th>
					<th>描述</th>
					<th>Action</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr :for="item in @modules" :class="item.actived && ['success']">
					<td>{{item.moduleName}}</td>
					<td>{{item.description}}</td>
					<td><ul>
							<li :for="action in item.actionNames"><a href="#"
								:click="invoke(item, action)">{{action}}</a></li>
						</ul></td>
					<td><button :visible="!item.actived" :click="@active(item)"
							class="btn btn-success btn-xs">激活</button>
						<button :click="@unActive(item)" :visible="item.actived"
							class="btn btn-warning btn-xs">取消激活</button>
						<button :click="@unload(item)"
							class="btn btn-danger btn-xs">卸载</button></td>
				</tr>
			</tbody>
		</table>
		<div>
			<pre>{{invokeResult}}</pre>
		</div>
	</div>
	<script type="text/javascript" src="/res/js/avalon.js"></script>
	<script type="text/javascript" src="/res/js/mmRequest.js"></script>
	<script>
		var vm = avalon
				.define({
					$id : "test",
					modules : [],
					errMsg : '',
					invokeResult : '',
					setErrMsg : function(errMsg) {
						vm.errMsg = errMsg;
						setTimeout(function() {
							vm.errMsg = "";
						}, 2000);
					},
					list : function() {
						avalon.ajax({
							dataType : 'json',
							url : "/listHandler",
							success : function(data) {
								if (data.errCode == '0') {
									vm.modules = data.data;
								} else {
									vm.setErrMsg(data.errMsg || '获取数据失败');
								}
							},
							error : function(xhr) {
								vm.setErrMsg(xhr.responseText || '网络错误');
							}
						});
					},
					invoke : function(item, actionName) {
						avalon
								.ajax({
									dataType : 'json',
									url : "/invokeHandler",
									data : {
										moduleName : item.moduleName,
										actionName : actionName
									},
									success : function(data) {
										vm.invokeResult = JSON.stringify(data,
												null, 4);
									},
									error : function(xhr) {
										vm
												.setErrMsg(xhr.responseText
														|| '网络错误');
									}
								});
					},
					active : function(item) {
						avalon.ajax({
							dataType : 'json',
							url : "/activeHandler",
							data : {
								moduleName : item.moduleName
							},
							success : function(data) {
								if (data.errCode == '0') {
									vm.list();
								} else {
									vm.setErrMsg(data.errMsg || '激活失败');
								}
							},
							error : function(xhr) {
								vm.setErrMsg(xhr.responseText || '网络错误');
							}
						});
					},
					unActive : function(item) {
						avalon.ajax({
							dataType : 'json',
							url : "/unActiveHandler",
							data : {
								moduleName : item.moduleName
							},
							success : function(data) {
								if (data.errCode == '0') {
									vm.list();
								} else {
									vm.setErrMsg(data.errMsg || '取消激活失败');
								}
							},
							error : function(xhr) {
								vm.setErrMsg(xhr.responseText || '网络错误');
							}
						});
					},
					unload : function(item) {
						avalon.ajax({
							dataType : 'json',
							url : "/unloadHandler",
							data : {
								moduleName : item.moduleName
							},
							success : function(data) {
								if (data.errCode == '0') {
									vm.list();
								} else {
									vm.setErrMsg(data.errMsg || '卸载失败');
								}
							},
							error : function(xhr) {
								vm.setErrMsg(xhr.responseText || '网络错误');
							}
						});
					}
				});
		vm.list();
	</script>
</body>
</html>